<template>
  <div class="common-layout">
    <el-container>
      <el-aside class="elAside" width="200px">
        <div style="display: flex; justify-content: space-around; align-items: center">
          <img src="@/assets/LOGO.png" style="width: 40px" alt="" />
          <p style="font-size: 18px; color: #3498db">数字人面试官</p>
        </div>
        <el-row class="tac">
          <el-col :span="24">
            <h5 class="mb-2" style="color: #999">主菜单</h5>
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              router
            >
              <el-menu-item index="/dataGlance">
                <el-icon><Odometer /></el-icon> <span>数据概览</span>
              </el-menu-item>

              <el-menu-item index="/candidateManagement">
                <el-icon><Avatar /></el-icon> <span>候选人管理</span>
              </el-menu-item>

              <el-sub-menu>
                <template #title>
                  <el-icon><QuestionFilled /></el-icon>
                  <span>题库管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/topicManagement">
                    <el-icon><Discount /></el-icon>题目分类管理</el-menu-item
                  >
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item index="/topicSet">
                    <el-icon><Files /></el-icon>题目集管理
                  </el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group>
                  <el-menu-item index="/topicClassification">
                    <el-icon><Operation /></el-icon>题目管理
                  </el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>

              <el-menu-item index="/InterviewTranscripts">
                <el-icon><Connection /></el-icon>
                <span>面试记录</span>
              </el-menu-item>

              <el-menu-item index="/posts">
                <el-icon><Briefcase /></el-icon>
                <span>职位管理</span>
              </el-menu-item>
              <el-menu-item index="/Interviewer">
                <el-icon><Shop /></el-icon>
                <span>面试官管理</span>
              </el-menu-item>

              <el-menu-item index="/systemSettings">
                <el-icon><Tools /></el-icon>
                <span>系统设置</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-container>
        <el-header
          class="elHeader"
          style="display: flex; justify-content: right; align-items: center"
        >
          <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false" router>
            <el-sub-menu index="1">
              <template #title class="tem-title">
                <el-avatar :size="30" src="@/assets/LOGO.png" />
                <div class="el-sub-menu__title">
                  <p>张经理</p>
                  <p>管理员</p>
                </div>
              </template>
              <el-menu-item
                ><el-icon><User /></el-icon>基本资料</el-menu-item
              >
              <el-menu-item index="1"
                ><el-icon><Crop /></el-icon>更换头像</el-menu-item
              >
              <el-menu-item index="/user/password"
                ><el-icon><EditPen /></el-icon>重置密码</el-menu-item
              >
              <el-menu-item
                ><el-icon><SwitchButton /></el-icon>退出登录</el-menu-item
              >
            </el-sub-menu>
          </el-menu>
        </el-header>
        <el-main style="background-color: #f5f5f5"><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup lang="ts">
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style scoped>
.elAside {
  height: 100vh;
  border: 1px solid #ccc;
}
.elHeader {
  height: 80px;
  /* line-height: 80px; */
  border: 1px solid #ccc;
}
.tem-title {
  display: flex;
  align-items: center;
}
.el-sub-menu__title {
  /* span {
    display: block;
  } */
  display: block;
  margin-top: -20px;
  p {
    margin: 0;
    height: 20px;
  }
}
</style>
